<template>
  <div>
    <!-- 热门城市 -->
    <p style="height:30px;background:#eee;line-height:30px;font-size:13px">热门城市</p>
    <div>
      <div v-for="(item,index) in crtylist" :key="index" class="crty_content" @click="add(item)">{{item}}</div>
    </div>
    <van-index-bar>
      <van-index-anchor v-for="(value,key,index) in good" :key="index" :index="key">
        {{ key }}
        <van-cell  v-for="(item,i) in value" :key="i"  :title="item.name" @click="add(item)" />
      </van-index-anchor>
    </van-index-bar>


  </div>
</template>
<script>
export default {
  data() {
    return {
      crtylist: [
        "香港",
        "澳门",
        "台北",
        "曼谷",
        "新加坡",
        "首尔",
        "东京",
        "济州岛",
        "芭提雅",
        "巴厘岛",
        "清迈",
        "悉尼",
        "大阪",
        "洛杉矶",
        "旧金山",
        "罗马",
        "巴黎",
        "伦敦",
        "米兰",
        "纽约",
      ],
      good: [],
    };
  },
  mounted() {
    this.$axios.get("./static/api/city.json").then((res) => {
      console.log(res.data.data.cities);
      this.good = res.data.data.cities;
    });
  },
  methods:{
      add(item){
          this.$router.push({
              path:'/',
              query:{
                 name:item
              }
             
          })
      }
  }
};
</script>
<style lang="stylus" scoped>
.crty_content {
  display: inline-block;
  width: 32.5%;
  height: 40px;
  border: 1px solid gray;
  text-align: center;
  line-height: 40px;
}
</style>